<template>
    <div>
        <div class="cw">
            <!-- <van-empty
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description=""
            /> -->
            <span>对不起!</span>
            <br>
            <span>亲,当前界面还在开发中</span>
            <template>
            <div>
                <div id="container"></div>
            </div>
        </template>
        </div>
        

    </div>
</template>
<!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
    export default {
         name: "baseGeometry",
       data() {
	    return {
	      camera: null,
	      scene: null,
	      renderer: null,
	      mesh2: null,
	    };
	  },
	  methods: {
	    init() {
	      let container = document.getElementById("container"); //容器
	
	      this.camera = new THREE.PerspectiveCamera(
	        75,
	        container.clientWidth / container.clientHeight,
	        0.1,
	        100
	      ); //初始化相机，参数通俗讲PerspectiveCamera(远近，宽高比,摄像机视锥体近端面(默认0.1)，摄像机视锥体远端面(默认2000，无限大，表示可以看到最远))
	      this.camera.position.z = 1; //Z轴的距离
	      this.scene = new THREE.Scene(); //初始化场景
	
	      var geometry1 = new THREE.DodecahedronBufferGeometry(0.1); //多面体
	      let material1 = new THREE.MeshLambertMaterial({
	        color: 0x409eff,
	        transparent: true, //是否透明
	        opacity: 0.5, //透明度
	      });
	      var mesh1 = new THREE.Mesh(geometry1, material1); //材质跟立方体
	      this.scene.add(mesh1); //add到场景中
	
	      var geometry2 = new THREE.BoxGeometry(0.1, 0.1, 0.1); //多面体
	      let material2 = new THREE.MeshLambertMaterial({ color: 0x7dd427 });
	      var mesh2 = new THREE.Mesh(geometry2, material2); //材质跟立方体
	      this.mesh2 = mesh2;
	      mesh2.position.set(0, 0.2, 0); //Y偏移0.2
	      this.scene.add(mesh2); //add到场景中
	
	      var geometry3 = new THREE.SphereGeometry(0.1, 32, 32); //球体//多面体
	      let material3 = new THREE.MeshLambertMaterial({});
	      var mesh3 = new THREE.Mesh(geometry3, material3); //材质跟立方体
	      mesh3.position.set(0.3, 0, 0); //X偏移0.3
	      this.scene.add(mesh3); //add到场景中
	
	      //添加点光源
	      var point = new THREE.PointLight(0xffffff);
	      point.position.set(400, 10, 500);
	      this.scene.add(point);
	
	      //添加环境光
	      var ambient = new THREE.AmbientLight(0x999999);
	      this.scene.add(ambient);
	
	      this.renderer = new THREE.WebGLRenderer({ antialias: true }); //render函数
	      this.renderer.setSize(container.clientWidth, container.clientHeight); //设置render的尺寸
	      container.appendChild(this.renderer.domElement); //插入container
	      var controls = new OrbitControls(this.camera, container); //控制器，可实现鼠标左键旋转，右键拖动，滑轮缩放,OrbitControls第二个参数新版必填为绑定元素，改变相机对象的角度
	    },
	    animate() {
	      requestAnimationFrame(this.animate); //此方法会重复调用animate，从而实现旋转
	      //垂直旋转,两种都可
	      // this.mesh.rotation.x += 0.01 //垂直旋转
	      this.scene.rotateX(0.01)
	      //水平旋转,两种都可
	      // this.mesh2.rotation.y += 0.02;
	      // this.scene.rotateY(0.01)
	      this.renderer.render(this.scene, this.camera);
	    },
	  },
	  mounted() {
	    this.init();
	    this.animate();
	  },
    }
</script>

<style lang="scss" scoped>
.cw{
    // margin: 100px 0;
    background-color: #fff;
    text-align: center;
    span{
        color: rgb(128, 122, 122);
        font-size: 30px;
        
    }

    .baseGeometry {
	  position: relative;
	}
	.changeTabs {
	  position: absolute;
	  right: 20px;
	  top: 20px;
	  width: 100px;
	  height: 100px;
	  background: #fff;
	  z-index: 1000;
	}
	#container {
	  height: 600px;
      widows: 50px;
	}
}
</style>